<mat-card>
  <mat-card-header>
    <mat-card-title>Hero Details</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form [formGroup]="form" (ngSubmit)="saveHero()">
      <div class="editfields">
        <div [hidden]="addMode">
          <mat-form-field>
            <input matInput formControlName="id" placeholder="id" #id readonly>
          </mat-form-field>
        </div>
        <div>
          <mat-form-field>
            <input matInput formControlName="name" placeholder="name" #name
              (keyup.esc)="close()" (keyup.enter)="saveHero()">
          </mat-form-field>
        </div>
        <div>
          <mat-form-field>
            <textarea matInput formControlName="saying" placeholder="saying" #saying
            (keyup.esc)="close()" (keyup.enter)="saveHero()"></textarea>
          </mat-form-field>
        </div>
      </div>
      <button mat-raised-button color="accent" type="button" (click)="close()" matTooltip="Cancel all changes">Cancel</button>
      <button mat-raised-button color="primary" type="submit"
        [disabled]="form.pristine || form.invalid" matTooltip="Save all changes">Save</button>
    </form>
  </mat-card-content>
</mat-card>
